<template>
	<!-- 账户明细 -->
	<view>
		<view class="type">
			<view class="tab flex-c">
				<view class="flex-c" v-for="(item,index) in tabList" :key="index" @click="fnChangeOrderType(index)">
					<text :class="TabCur == index ? 'text-red':''">{{item.name}}</text>
				</view>
			</view>
			<view class="holder1"></view>
			<view class="typeBox">
				<view class="item flex-bc" v-for="(item,index) in accountList" :key="index">
					<view class="left flex">
						<view style="color: #333;font-size: 30rpx;">{{item.details}}</view>
						<view>{{item.create_time}}</view>
					</view>
					<view class="right flex-bc">
						<view style="color: #333;font-size: 30rpx;" v-if="item.value < 0">{{item.value}}元</view>
						<view style="color: #F22F29;font-size: 30rpx;" v-if="item.value > 0">{{item.value}}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="null" v-if="accountList.length == 0">
			<view class="nullBox flex-col-ac">
				<image src="/static/common/null.png"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				tabList: [{
					name: '全部'
				}, {
					name: '充值'
				}, {
					name: '投注'
				}, {
					name: '派奖'
				}, {
					name: '提现'
				}],
				token:uni.getStorageSync('token'),
				page:1,
				row:20,
				accountList:[]
			}
		},
		onLoad() {
			this.fnGetAccountList()
		},
		methods: {
			tabChange(index) {
				this.TabCur = index;
			},
			fnGoBack() {
				uni.navigateBack()
			},
			fnChangeOrderType(idx) {
				if (this.TabCur == idx) return
				this.TabCur = idx
				this.fnGetAccountList()
			},
			fnGetAccountList() {
				console.log(this.TabCur)
				uni.showToast({
					title:'加载中',
					icon:'loading'
				})
				this.request({
					url: '/czb/user/getBalanceLog',
					method: 'POST',
					data: {
						'store_id': 1,
						'token':this.token,
						'page':this.page,
						'row':this.row,
						'type':this.TabCur,
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) { 
						uni.hideToast()
						this.accountList = ret.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.null {
		width: 100%;
		height: 100%;
		background: #fff;
		position: fixed;
		border-top: 1rpx solid #e3e3e3;
		box-sizing: border-box;
		.nullBox {
			position: absolute;
			top: 20%;
			left: 50%;
			width: 400rpx;
			height: 220rpx;
			transform: translateX(-50%);
			font-size: 26rpx;
			color: #999;
			image {
				width: 100%;
				height: 100%;
				display: block;
				margin-bottom: 32rpx;
			}
		}
	
	}
	// .header {
	// 	width: 100%;
	// 	/*  #ifdef  H5  */
	// 	height: 88rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// 	background: #F22F29;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 999;
	// 	align-items: center;

	// 	.status-bar {
	// 		height: var(--status-bar-height);
	// 	}

	// 	.title {
	// 		width: 100%;
	// 		font-size: 32rpx;
	// 		color: #fff;
	// 		height: 100%;
	// 		padding-top: var(--status-bar-height);
	// 		box-sizing: border-box;

	// 		view {
	// 			flex: 1;
	// 			padding: 0 10rpx;
	// 			height: 100%;
	// 			box-sizing: border-box;
	// 			align-items: center;

	// 			.pageTitle {
	// 				margin-right: 15rpx;
	// 			}
	// 		}

	// 		.share {
	// 			justify-content: flex-end;

	// 			image {
	// 				width: 50rpx;
	// 				height: 50rpx;
	// 				display: block;
	// 				margin-right: 20rpx;
	// 			}

	// 			.select {
	// 				padding: 20rpx;
	// 			}
	// 		}
	// 	}
	// }

	// .holder {
	// 	/*  #ifdef  H5  */
	// 	height: 88rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// }
	.holder1 {
		height: 78rpx;
	}

	.type {
		font-size: 28rpx;
		position: relative;
		.tab {
			position: fixed;
			height: 80rpx;
			width: 100%;
			background: #fff;
			border-bottom: 1rpx solid #E3E3E3;
			z-index: 99;
			view {
				flex: 1;
				height: 100%;
				padding: 0 40rpx;

				text {
					height: 100%;
					width: 100%;
					text-align: center;
					line-height: 80rpx;
					color: #333;
				}
			}
		}
		.typeBox{
			background: #fff;
			
		}

		.text-red {
			color: #F22F29 !important;
			border-bottom: 4rpx solid #F22F29;
		}

		.item {
			height: 120rpx;
			border-bottom: 1rpx solid #E3E3E3;
			box-sizing: border-box;
			padding: 0 20rpx;
			color: #999;
			font-size: 26rpx;
			// justify-content: center;
			// flex-direction: column;
			.left{
				flex-direction: column;
			}
		}
	}
</style>
